import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as SeparatorStories from './Separator.stories';

<Meta of={SeparatorStories} />

# Separator

The Separator component is a visual divider that creates a clear distinction between different sections of content. It helps organize and structure information, making interfaces more scannable and easier to navigate.

## Usage

<Canvas of={SeparatorStories.Documentation} source={ { code: `
import React from "react";
import { Separator, Heading, Text } from "@webiny/admin-ui";

const SeparatorExample = () => {
    return (
        <div>
            <div className="space-y-1">
                <Heading level={6}>{"This is a heading."}</Heading>
                <Text size="sm" className={"text-neutral-strong"}>
                    {"This is a short description here"}
                </Text>
            </div>
            <Separator
                margin="lg"
                variant="subtle"
                orientation="horizontal"
                decorative={true}
            />
            <div className="flex items-center h-6 text-sm">
                <Text>{"This is text 1."}</Text>
            </div>
        </div>
    );
};

export default SeparatorExample;

` } }
        additionalActions={[
            {
                title: 'Open in GitHub',
                onClick: () => {
                    window.open(
                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Separator/Separator.tsx',
                        '_blank'
                    );
                },
            }
        ]}
/>

<Controls of={SeparatorStories.Documentation} />

```tsx
import React from "react";
import { Separator, Heading, Text } from "@webiny/admin-ui";

const SeparatorExample = () => {
    return (
        <div>
            <div className="space-y-1">
                <Heading level={6}>{"This is a heading."}</Heading>
                <Text size="sm" className={"text-neutral-strong"}>
                    {"This is a short description here"}
                </Text>
            </div>
            <Separator
                margin="lg"
                variant="subtle"
                orientation="horizontal"
                decorative={true}
            />
            <div className="flex items-center h-6 text-sm">
                <Text>{"This is text 1."}</Text>
            </div>
        </div>
    );
};

export default SeparatorExample;
```


## Examples

### Default

A basic horizontal separator with subtle styling and large margin.

<Canvas of={SeparatorStories.Default} source={ { code: `
import React from "react";
import { Separator, Heading, Text } from "@webiny/admin-ui";

const DefaultSeparatorExample = () => {
    return (
        <div>
            <div className="space-y-1">
                <Heading level={6}>{"This is a heading."}</Heading>
                <Text size="sm" className={"text-neutral-strong"}>
                    {"This is a short description here"}
                </Text>
            </div>
            <Separator margin="lg" variant="subtle" />
            <div className="flex items-center h-6 text-sm">
                <Text>{"This is text 1."}</Text>
            </div>
        </div>
    );
};

export default DefaultSeparatorExample;
` } } />

### Vertical and Horizontal

Using both vertical and horizontal separators to create a structured layout.

<Canvas of={SeparatorStories.VerticalAndHorizontal} source={ { code: `
import React from "react";
import { Separator, Heading, Text } from "@webiny/admin-ui";

const VerticalAndHorizontalExample = () => {
    return (
        <div>
            <div className="space-y-1">
                <Heading level={6}>{"This is a heading."}</Heading>
                <Text size="sm" className={"text-neutral-strong"}>
                    {"This is a short description here"}
                </Text>
            </div>
            <Separator margin={"lg"} />
            <div className="flex items-center h-6 text-sm">
                <Text>{"This is text 1."}</Text>
                <Separator orientation="vertical" margin={"lg"} />
                <Text>{"This is text 2."}</Text>
                <Separator orientation="vertical" margin={"lg"} />
                <Text>{"This is text 3."}</Text>
            </div>
        </div>
    );
};

export default VerticalAndHorizontalExample;
` } } />

### Horizontal Orientation

A separator with horizontal orientation, which is the default.

<Canvas of={SeparatorStories.HorizontalOrientation} source={ { code: `
import React from "react";
import { Separator, Heading, Text } from "@webiny/admin-ui";

const HorizontalOrientationExample = () => {
    return (
        <div>
            <div className="space-y-1">
                <Heading level={6}>{"This is a heading."}</Heading>
                <Text size="sm" className={"text-neutral-strong"}>
                    {"This is a short description here"}
                </Text>
            </div>
            <Separator margin={"lg"} orientation="horizontal" />
            <div className="flex items-center h-6 text-sm">
                <Text>{"This is text 1."}</Text>
            </div>
        </div>
    );
};

export default HorizontalOrientationExample;
` } } />

### Vertical Orientation

A separator with vertical orientation, useful for creating columns or dividing inline elements.

<Canvas of={SeparatorStories.VerticalOrientation} source={ { code: `
import React from "react";
import { Separator, Text } from "@webiny/admin-ui";

const VerticalOrientationExample = () => {
    return (
        <div className="flex justify-center h-6 text-sm">
            <Text>{"This is text 1."}</Text>
            <Separator orientation="vertical" margin={"lg"} />
            <Text>{"This is text 2."}</Text>
            <Separator orientation="vertical" margin={"lg"} />
            <Text>{"This is text 3."}</Text>
        </div>
    );
};

export default VerticalOrientationExample;
` } } />

### Less Margin

A separator with medium margin, creating a tighter layout.

<Canvas of={SeparatorStories.LessMargin} source={ { code: `
import React from "react";
import { Separator, Heading, Text } from "@webiny/admin-ui";

const LessMarginExample = () => {
    return (
        <div>
            <div className="space-y-1">
                <Heading level={6}>{"This is a heading."}</Heading>
                <Text size="sm" className={"text-neutral-strong"}>
                    {"This is a short description here"}
                </Text>
            </div>
            <Separator margin={"md"} />
            <div className="flex items-center h-6 text-sm">
                <Text>{"This is text 1."}</Text>
                <Separator orientation="vertical" margin={"md"} />
                <Text>{"This is text 2."}</Text>
                <Separator orientation="vertical" margin={"md"} />
                <Text>{"This is text 3."}</Text>
            </div>
        </div>
    );
};

export default LessMarginExample;
` } } />

### More Margin

A separator with extra large margin, creating more space between sections.

<Canvas of={SeparatorStories.MoreMargin} source={ { code: `
import React from "react";
import { Separator, Heading, Text } from "@webiny/admin-ui";

const MoreMarginExample = () => {
    return (
        <div>
            <div className="space-y-1">
                <Heading level={6}>{"This is a heading."}</Heading>
                <Text size="sm" className={"text-neutral-strong"}>
                    {"This is a short description here"}
                </Text>
            </div>
            <Separator margin={"xl"} />
            <div className="flex items-center h-6 text-sm">
                <Text>{"This is text 1."}</Text>
                <Separator orientation="vertical" margin={"xl"} />
                <Text>{"This is text 2."}</Text>
                <Separator orientation="vertical" margin={"xl"} />
                <Text>{"This is text 3."}</Text>
            </div>
        </div>
    );
};

export default MoreMarginExample;
` } } />
